<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>车辆添加</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css" media="all">
<script type="text/javascript" src="lib/loading/okLoading.js"></script>
<style>
.imgs {
	display: none;
}

.picture {
	display: none;
}
</style>

</head>
<body>

	<div class="x-body">
		<form class="layui-form layui-form-pane" action="${pageContext.request.contextPath}/CarServlet" 
		id="update-form" method="post" enctype="mulipart/form-data" >
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">


				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
					<!-- 隐藏域 -->
						<input type="hidden" name="op" value="update">
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>车辆ID
							</label>
							<div class="layui-input-block">
								<input type="text" name="carId" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>车主名字
							</label>
							<div class="layui-input-block">
								<input type="text" name="carUserName" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>车牌号
							</label>
							<div class="layui-input-block">
								<input type="text" name="carCard" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>车主电话
							</label>
							<div class="layui-input-block">
								<input type="text" name="carPhone" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>房间号
							</label>
							<div class="layui-input-block">
								<input type="text" name="roomNo" autocomplete="off" 
									placeholder="" class="layui-input" value="">
							</div>
						</div>
						</div>

						<div class="layui-form-item">
							<button class="layui-btn" type="sumbit" >修改保存</button>
						</div>

						<div style="height: 100px;"></div>
					</div>



				</div>

			</div>
		</form>
	</div>
	
	<!-- 引入jQuery库 -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/back/js/jquery-3.6.0.js"></script>
	<!-- 引入jQuery-form -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/back/js/jquery-form.js"></script>
	<script type="text/javascript">
	let carId = "${param.carId}";
	
	/* 发起异步请求单个商品信息 */
	$.getJSON("${pageContext.request.contextPath}/CarServlet",{op:"findById",carId:carId},function(result,status,xhr){
		//获取商品信息，填充到指定的DOM元素上
		let carId = result.data.carId;
		let carUserName = result.data.carUserName;
		let carCard = result.data.carCard;
		let carPhone = result.data.carPhone;
		let roomNo = result.data.owner.roomNo;
		console.log(carId);
		$("input[name='carId']").val(carId);
		$("input[name='carUserName']").val(carUserName);
		$("input[name='carCard']").val(carCard);
		$("input[name='carPhone']").val(carPhone);
		$("input[name='roomNo']").val(roomNo);
		
	});
	
	//对指定的表单绑定提交事件
	$("#update-form").submit(function(){
		
		//表单提交之前应该对输入项进行校验，目前我们只是简单地做了必填属性require
		//.................
		
		//使用jQuery.form.js插件方法ajaxSubmit()异步提交表单
		
		$(this).ajaxSubmit(function(result){
			layui.use('layer',function () {
				console.log("进的来");
				if(result.status != 0){
					//!=0的时候说明添加商品成功
					layer.msg(result.message,{icon:1,time:3000});
					 //定时器
					 window.setTimeout(function(){
						 //关闭子窗口
			 			 var index = parent.layer.getFrameIndex(window.name);
			 			 parent.layer.close(index);
			 			 
			 			 //调用首页的查询方法
			 			 window.parent.car_search_page();
					 },5000);
				}else{
					//添加商品出错
					layer.msg(result.message,{icon:5,time:5000});
				}
			});
		});
		//限制默认的表单提交
		return false;
	});
	
	
	</script>
	
	
	
	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>

	<script>
    layui.use(['element','layer','form'], function(){
        $ = layui.jquery;//jquery
        lement = layui.element();//面包导航
        layer = layui.layer;//弹出层
        form = layui.form();
        okLoading.close($);
        form.render();



        //图片上传接口
        /*layui.upload({
          url: './upload.json' //上传接口
          ,success: function(res){ //上传成功后的回调
              console.log(res);
            $('#LAY_demo_upload').attr('src',res.url);
          }
        });*/


        //监听提交
        form.on('submit(add)', function(data){
            var veh_hphm=$("input[name='veh_hphm']").val();
            var veh_color=$("input[name='veh_color']").val();
            var image=$("input[name='image']").val();
            var community_id=$('#community_id option:selected') .val();//所属栏目ID
            var personnel_id=$('#personnel_id option:selected') .val();//所属栏目ID

            if(community_id==""){
                layer.msg('所属小区不能为空',{icon:5,time:2000});return false;
            }
            if(personnel_id==""){
                layer.msg('所属成员不能为空',{icon:5,time:2000});return false;
            }
            if(veh_hphm==""){
                layer.msg("车牌号码不能为空！",{icon:5,time:2000});return false;
            }
            if(veh_color==""){
                layer.msg("号牌颜色不能为空！",{icon:5,time:2000});return false;
            }
            if(image==""){
                layer.msg("车辆图片不能为空！",{icon:5,time:2000});return false;
            }
            var data=data.field;
            $.ajax({
                type:"post",
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.status==1){
                        layer.msg(data.info, {icon: 6,time:2000},function () {
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                        return false;

                    }else{
                        layer.msg(data.info,{icon:5,time:2000});return false;
                    }
                }

            });

        });

        form.on('select(aihao)', function(data){
            communidy();
        });
        $(function () {
            communidy();
        });
        //communidy();
        function communidy() {
            var communidy = $("#community_id").val();
            $.ajax({
                type:"post",
                dataType:"json",
                data:{communidy:communidy},
                success:function (data) {
                    var dlen =data.length;
                    var str='';
                    if(dlen>0){
                        for (var i=0;i<dlen;i++){
                            var dt=data[i];
                            str +='<option value="' + dt.id + '">';
                            str +=dt.member_name;
                            str +='</option>';
                        }
                    }else {
                        str +='<option value="">----暂无数据----</option>';
                    }

                    $("#personnel_id").html(str);
                    form.render('select', 'aihao');

                }
            })
        }


    })
</script>
	<!--栏目缩略图上传-->
	<script>
    function upload(obj,id)
    {
        var formData = new FormData();
        formData.append('images', $('#previewImg')[0].files[0]);
        formData.append('id', id);//将id追加再id中
        //console.log(formData);
        layer.msg('图片上传中', {icon: 16});
        $.ajax({
            type:"post",
            processData: false,
            contentType: false,
            data:formData,
            success:function(data){
                if(data.status == 1){
                    layer.closeAll('loading');
                    //layer.msg(data.info,{icon:1,time:1000});
                    $("#pimages").attr('src',data.image_name);
                    $("#avatar").val(data.image_name);
                    $(".imgs").show();
                    return false;
                }else{
                    layer.msg(data.info,{icon:2,time:1000});
                }
            }
        });
    }
</script>

</body>
</html>